{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load  sizeformat %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'vms/vms_list.css' %}">
{% endblock %}
{% block title %}{% translate 'IP地址列表' %}{% endblock %}

{% block boby %}
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>附加IP地址</strong></span>
                <div class="float-right">
{#                    <a class="btn btn-sm btn-primary"#}
{#                       href="{% url 'vms:vm-detach-ip' vm_uuid=vm_uuid %}">移除IP</a>#}
                    <a class="btn btn-sm btn-info" href="{% url 'network:vlan_show' %}?vlan={{ vlan_id }}">{% translate 'IP地址列表' %}</a>
                </div>
            </div>
            <div class="card-body">
                <div class="">
                    <div class="text-primary h4">{% translate '虚拟机信息' %}:</div>
                    <div class="">
                        <dl class="row">
                            <dt class="col-2 text-right">{% translate '虚拟机UUID' %}:</dt>
                            <dd class="col-10" id="id-mount-vm-uuid">{{ vm.hex_uuid }}</dd>
                            <dt class="col-2 text-right">{% translate '虚拟机IP地址' %}:</dt>
                            <dd class="col-10">{{ vm.ipv4 }}</dd>
                            <dt class="col-2 text-right">{% translate '镜像' %}:</dt>
                            <dd class="col-10">{{ vm.image_name }}</dd>
                            <dt class="col-2 text-right">{% translate '机组' %}:</dt>
                            <dd class="col-10">{{ vm.host.group }}</dd>
                            <dt class="col-2 text-right">{% translate '备注' %}:</dt>
                            <dd class="col-10">{{ vm.remarks }}</dd>
                        </dl>
                    </div>
                </div>
                <hr style=" height:1px;border:1px;border-top:1px solid #185598;"/>
                <div>
                    <div class="text-success h4 col-sm-4">{% translate '可供附加的IP地址' %}：</div>
                    <div class="float-right col-sm-8">
                        <form role="form" class="form-horizontal" method="get" action="">
                            <div class="input-group" style="">
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="id-center">VLAN{% translate '网段' %}</label>
                                </div>
                                <select name="vlan-select" class="custom-select" id="id-center">
                                    <option value="">--</option>
                                    {% for c in vlan %}
                                        <option value="{{ c.id }}">
                                            {{ c.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                                <div class="input-group-prepend">
                                    <label class="input-group-text" for="id-center">{% translate '关键字' %}</label>
                                </div>
                                <input type="text" class="form-control" name="search" value="{{ search }}"
                                       placeholder="{% translate '搜 IP地址' %}"/>
                                <span class="input-group-prepend"></span>
                                <button type="submit" class="btn btn-primary form-control">{% translate '筛选' %}</button>
                            </div>
                        </form>
                    </div>
                </div>
                <table class="table table-bordered table-vm-list"
                       style="word-wrap:break-word;word-break:break-all;">
                    <tr>
                        <th>{% translate '编号' %}</th>
                        <th>IP{% translate '地址' %}</th>
                        <th>IPv6{% translate '地址' %}</th>
                        <th>MAC{% translate '地址' %}</th>
                        <th>{% translate '网桥名' %}</th>
                        <th>VLAN{% translate '描述' %}</th>
                        <th>{% translate '标签' %}</th>
                        <th>{% translate '备注' %}</th>
                        <th>{% translate '操作' %}</th>
                    </tr>
                    {% for ip in mac_ip %}
                        <tr id="tr_">
                            <td>{{ ip.id }}</td>
                            <td>{{ ip.ipv4 }}</td>
                            <td>{{ ip.ipv6 | default_if_none:'' }}</td>
                            <td>{{ ip.mac }}</td>
                            <td>{{ ip.vlan.br }}</td>
                            <td>{{ ip.vlan.name }}</td>
                            <td>{{ ip.vlan.get_tag_display }}</td>
                            <td>{{ ip.desc }}</td>

                            <td>
                                <button class="btn btn-primary btn-vm-attach-ip" data-attach-ip-id="{{ ip.id }}"
                                        data-vm-uuid="{{ vm_uuid }}">{% translate '附加IP地址' %}
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
                {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                    {% if page_list %}
                        <div class="card-footer">
                            <nav aria-label="Page navigation">
                                <ul class="pagination" style="margin:0;">
                                    {% if previous %}
                                        <li class="page-item"><a class="page-link" href="?{{ previous }}"
                                                                 aria-label="Previous"><span
                                                aria-hidden="true">&laquo;</span></a></li>
                                    {% else %}
                                        <li class="page-item disable"><span class="page-link"
                                                                            aria-hidden="true">&laquo;</span>
                                        </li>
                                    {% endif %}

                                    {% for disp, query, active in page_list %}
                                        {% if active %}
                                            <li class="page-item active"><a class="page-link"
                                                                            href="?{{ query }}">{{ disp }}</a></li>
                                        {% else %}
                                            <li class="page-item"><a class="page-link"
                                                                     href="?{{ query }}">{{ disp }}</a></li>
                                        {% endif %}
                                    {% endfor %}

                                    {% if next %}
                                        <li class="page-item"><a class="page-link" href="?{{ next }}"
                                                                 aria-label="Next"><span
                                                aria-hidden="true">&raquo;</span></a></li>
                                    {% else %}
                                        <li class="page-item disable"><span class="page-link"
                                                                            aria-hidden="true">&raquo;</span>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    {% endif %}
                {% endwith %}

            </div>
        </div>

    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_operations.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_attach_ip.js' %}"></script>
    {#    <script type="text/javascript" src="{% static 'vms/vms_shelve_list.js' %}"></script>#}
{% endblock %}

